<template>
	<view class="buys-centers">
		<view class="buys_news">
			<video class="em-video_camera" controls :src="videos.video">
			</video>
			<view class="title-bar">{{videos.title}}</view>
			<view class="bar-top">
				<view class="item-info">
				   <image src="../../static/images/manline.png"></image>
				   <view class="font">{{videos.visit}}</view>
				</view>
				<view class="item-info">
				   <image v-show="dianzan==1" src="../../static/images/dianzan.png" @click="tab()"></image>
				   <image v-show="dianzan==2" src="../../static/images/dianzan_active.png"></image>
				   </view>
				<view class="item-info">
					 <image v-show="shoucang==1" src="../../static/images/shoucang.png" @click="tabs()"></image>
					 <image v-show="shoucang==2" src="../../static/images/shoucang_active.png"></image>
				</view>
				<view class="item-info">
				    <image src="../../static/images/zhuanfa.png"></image>
				</view>
				
			</view>
			<view class="tishi-top">课程介绍</view>
			<view class="buys-detail">
		    	<jyf-parser :html="description" ref="article" :tag-style="tagStyle"></jyf-parser>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	import parser from "@/components/jyf-parser/jyf-parser";
	import {
		getvideo,collect,thumbsup
	} from '@/api/api.js';
	export default {
		components: {
			"jyf-parser": parser,
		 },
		data() {
			return {
				content:'',
				name:'',
				phone:'',
				dianzan:1,
				shoucang:1,
				id:'',
				videos:'',
				description:''
			}	
		},
		onLoad(opt) {
			console.log(opt.id)
			this.id=opt.id
			getvideo(opt.id).then(res => {
				console.log(res.data)
				this.videos=res.data.info
				this.description=res.data.info.content
			});
			
		},
		created() {},
		mounted() {
			
		},
		methods: {
			tab(){
				let that=this
				that.dianzan=2
				thumbsup(that.id).then(res => {
				
					if (res.status==200)
						that.$util.Tips({
							title: '点赞成功',
							icon: 'success'
						});
					else
						that.$util.Tips({
							title: '点赞失败',
							icon: 'error'
						});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			},
			tabs(){
				let that=this
				that.shoucang=2
				collect(that.id).then(res => {
				
					if (res.status==200)
						that.$util.Tips({
							title: '收藏成功',
							icon: 'success'
						});
					else
						that.$util.Tips({
							title: '收藏失败',
							icon: 'error'
						});
				}).catch(err => {
					return that.$util.Tips({
						title: err
					});
				})
			}
		},		
       }
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.buys-centers{
		width: 100%;
		overflow: hidden;
		margin: 0rpx auto;
		.bar-top{
			width: 98%;
			padding: 2%;
			margin: 0rpx auto;
			overflow: hidden;
			display: flex;
			.item-info{
				width: 25%;
				overflow: hidden;
				margin: 0rpx auto;
				text-align: center;
				image{
					width: 38rpx;
					height: 38rpx;
				}
				.font{
					width: 100%;
					overflow: hidden;
					text-align: center;
				}
			}
			
		}
		.em-video_camera{
			width: 98%;
			min-height: 389rpx;
			margin: 0rpx auto;
			overflow: hidden;
		}
		.buys-detail{
			width: 96%;
			margin: 0rpx auto;
			overflow: hidden;
			padding: 2%;
		}
		.title-bar{
			width: 100%;
			overflow: hidden;
			padding: 4%;
			color: #333333;
		}
		.tishi-top{
			width: 100%;
			line-height: 44rpx;
			text-align: center;
			font-size: 28rpx;
			background: #F0F0F0;
			color: #333333;
			
		}
		
	}
</style>
